<template>
	<div class="space-rank-analyze">
		<a-card title="空间资源排行分析（Top10）">
			<v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" @click="handleChartClick" />
		</a-card>
	</div>
</template>

<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { getSpaceRankAnalyzeUsingPost } from '@/api/spaceAnalyzeController'
import { useRouter } from 'vue-router'

// 加载状态
const loading = ref(false)
const router = useRouter()

//图表数据
const dataList = ref<API.Space[]>([])

// 处理图表点击事件
const handleChartClick = (params: any) => {
	if (params.componentType === 'series') {
		const clickedSpace = dataList.value[params.dataIndex]
		if (clickedSpace?.id) {
			// 在新窗口中打开空间详情页
			const routeUrl = router.resolve(`/space/${clickedSpace.id}`)
			window.open(routeUrl.href, '_blank')
		}
	}
}
// 获取数据
const fetchData = async () => {
	loading.value = true
	// 转换搜索参数
	const res = await getSpaceRankAnalyzeUsingPost({
		topN: 10, // 默认获取前10名
	})
	if (res.data.code === 0) {
		dataList.value = res.data.data ?? []
	} else {
		message.error('获取空间使用排行分析数据失败：' + res.data.message)
	}
	loading.value = false
}

/**
 * 监听变量，参数改变时触发数据的重新加载
 */
watchEffect(() => {
	fetchData()
})

// 图表配置（使用折线图）
const options = computed(() => {
	const spaceNames = dataList.value.map((item) => item.spaceName)
	const usageData = dataList.value.map((item) => ((item.totalSize || 0) / (1024 * 1024)).toFixed(2)) // 转为 MB

	return {
		tooltip: {
			trigger: 'item',
			position: function (point: number[], params: any, dom: HTMLElement, rect: any, size: any) {
				// 固定位置，避免跟随鼠标移动
				return [point[0] + 20, point[1] - 20]
			},
			confine: true, // 限制 tooltip 在图表区域内
			enterable: true, // 允许鼠标进入 tooltip 区域
			hideDelay: 500, // 延迟隐藏时间，方便点击
			transitionDuration: 0, // 移除动画，避免晃动
			formatter: (params: any) => {
				const spaceId = dataList.value[params.dataIndex]?.id
				const routeUrl = router.resolve(`/space/${spaceId}`)
				return `
					<div style="padding: 10px; min-width: 150px;">
						<div style="font-weight: bold; margin-bottom: 5px;">${params.name}</div>
						<div style="margin-bottom: 8px;">空间使用量: ${params.value} MB</div>
						<div>
							<button 
								onclick="window.open('${routeUrl.href}', '_blank')" 
								style="
									background: #1890ff; 
									color: white; 
									border: none; 
									padding: 6px 12px; 
									border-radius: 4px; 
									cursor: pointer;
									font-size: 12px;
									width: 100%;
								"
							>
								查看详情
							</button>
						</div>
					</div>
				`
			},
		},
		xAxis: {
			type: 'category',
			data: spaceNames,
			axisLabel: {
				rotate: 45, // 旋转标签以防重叠
				interval: 0, // 显示所有标签
			},
		},
		yAxis: {
			type: 'value',
			name: '空间使用量 (MB)',
		},
		series: [
			{
				name: '空间使用量 (MB)',
				type: 'bar',
				data: usageData,
				itemStyle: {
					color: '#5470C6', // 自定义柱状图颜色
				},
				emphasis: {
					itemStyle: {
						color: '#ff7f50', // 鼠标悬停时的颜色
					},
				},
				cursor: 'pointer', // 鼠标悬停时显示手型光标
			},
		],
	}
})
</script>

<style scoped lang="scss"></style>
